<template>
	<a-row>
		<a-col :span="24">
			<a-card>
				<div class="grid-content" style="height: 100%; width: 100%">
					<div class="container" id="componentContainer">
						<component
							v-if="config.dynamicCode && !config.isCustomViewFlag"
							:is="config.dynamicCode"
							:id="props.lf?.id"
							:nodeId="props.id"
							:frontFile="config.frontFile"
							:componentConfig="config.componentConfig"
							ref="componentRef"
						></component>

						<NodePropertiesCustomComponent
							v-if="config.isCustomViewFlag"
							:id="props.lf?.id"
							:nodeId="props.id"
							ref="customComponentRef"
							:frontFile="config.frontFile"
							:basicConfig="config.basicConfig"
							:component="props.properties?.component"
							:componentConfig="config.componentConfig"
						></NodePropertiesCustomComponent>
					</div>
				</div>
			</a-card>
		</a-col>
	</a-row>
</template>

<script setup>
	import { defineProps, onMounted, getCurrentInstance } from 'vue'
	import NodePropertiesCustomComponent from '@/views/process/engine/node/nodePropertiesCustomComponent.vue'

	const props = defineProps(['properties', 'id', 'lf'])

	const config = ref({
		dynamicCode: null,
		frontFile: {},
		componentConfig: {},
		basicConfig: {},
		isCustomViewFlag: false
	})
	const { appContext } = getCurrentInstance()
	const { components } = appContext
	// window.components = components;
	// components.DbQuery

	const componentRef = ref()
	const customComponentRef = ref()
	onMounted(() => {
		setConfig()
	})

	const setConfig = () => {
		if (!props.properties?.component?.type) {
			return
		}
		if (props.properties?.componentConfig) {
			config.value.componentConfig = props.properties.componentConfig
		}
		if (props.properties?.basicConfig) {
			config.value.basicConfig = props.properties.basicConfig
		}
		config.value.frontFile = props.lf?.getGraphData()


		let comp =components[props.properties?.component?.type];

		if(!comp){
			comp = findComponentByIgnoreCase(components, props.properties?.component?.groupCode);
			config.value.dynamicCode = comp?comp['__name']:null;
		}else{
			config.value.dynamicCode = comp['__name']
		}
		config.value.isCustomViewFlag = comp  == null
	}

	const findComponentByIgnoreCase = (components, str) => {
		let comp = null;
		for (let b in components) {
			if(b.toLowerCase()==str.toLowerCase()){
				comp = components[b];
				break;
			}
		}
		return comp;
	}

	const getConfig = async () => {
		if (config.value.isCustomViewFlag) {
			let data = await customComponentRef.value.getComponentConfig()
			console.log(data)
			return data
		}
		if (componentRef.value.beforeSaveProcessor) {
			await componentRef.value.beforeSaveProcessor()
		}
		return config.value.componentConfig
	}
	defineExpose({
		getConfig
	})
</script>

<style scoped lang="less"></style>
